<template>
  <div>
    首页
    <el-button type="primary">按钮</el-button>


    <Form :schema="schema" @register="formRegister" />

    <Search :schema="schema" />

    <Table :columns="columns" :data="data" />

  </div>
</template>
<script lang="tsx" setup>
import { Form, FormSchema } from "@/components/Form";
import { Table, TableColumn } from '@/components/Table'
import { useForm } from "@/hooks/web/useForm";
const { formRegister, formMethods } = useForm();
const schema = reactive<FormSchema[]>([
  {
    field: "user",
    label: "用户",
    component: "Input",
    componentProps: {
      placeholder: "请输入用户",
    },
  },
  {
    field: "password",
    label: "密码",
    component: "Input",
    componentProps: {
      placeholder: "请输入密码",
      on: {
        blur: (e: any) => {
          console.log(e.target.value);
        },
      },
    },
  },
  {
    field: "confirmPassword",
    label: "确认密码",
    component: "Input",
    componentProps: {
      placeholder: "请输入确认密码",
    },
  },
]);




const columns = reactive<TableColumn[]>([
  {
    field: 'title',
    label: 'title'
  },
  {
    field: 'author',
    label: 'author'
  }
])

const data = reactive([
  {
    title: 'title1',
    author: 'author1'
  },
  {
    title: 'title2',
    author: 'author2'
  },
  {
    title: 'title3',
    author: 'author3'
  }
])

</script>
<style lang="less"></style>
